<template>
	<view class="wanl-signin-log">
		<view class="edgeInsetTop"> </view>
		<!-- <view class="header"> -->
			<!-- <view class="text-center" >
				<view class="text-sl">
					{{user.travelcardall?user.travelcardall:0}}
				</view>
				<view class="text-sl">
					未兑换:{{user.travelcardlock?user.travelcardlock:0}}
				</view>
				<view class="cu-btn bg-orange radius-bock margin-top-bj" style="justify-content: space-around;background-color:#F7F7F7;">
					<view  @tap="onScoreRank" style="background-color: #fe6600;color: #ffffff;width: 150rpx;height: 80rpx;line-height: 80rpx;border-radius: 28rpx;margin: 0 20rpx;">
						兑换
					</view>
					<view  @tap="onScoreRanksss" style="background-color: #fe6600;color: #ffffff;width: 150rpx;height: 80rpx;line-height: 80rpx;border-radius: 28rpx;;margin: 0 20rpx;">
						明细
					</view>
				</view>
				
			</view> -->
		<!-- </view> -->
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item, index) in dataList" :key="item.id" style="height: 400rpx;width: 96%;
    margin: 0 auto;">
				<view class="content"  style="display:flex; justify-content: space-between;flex-direction: column;align-items: flex-start;height: 400rpx;padding:  38rpx 0 42rpx 0">
					
					
					<view class="text-lg text-orange"   style="margin-left:6%;color: red;font-size: 36rpx">预约次数：{{item.yy_number}}</view>
					
					<view class="text-sm" style="color: white;padding-left: 80rpx;;color: white;font-size: 30rpx">{{item.card_no}}</view>
				</view>
				<view class="action" style="display:flex; justify-content: space-between;flex-direction: column;align-items: flex-end;height: 400rpx;width: 300rpx;margin: 0;padding:  25rpx 0 50rpx 0">
					<view class="text-lg" style='line-height:60upx;border-radius: 6upx;width: 150rpx;margin: 0;color:white;font-size: 36rpx;' v-if="item.state==0" @click="zhuangrang(item.id)">转让</view>
					<view class=" text-lg" v-if="item.state==1" style='line-height:60upx;border-radius: 6upx;width: 150rpx;margin: 0;color:white;font-size: 36rpx;'>已核销</view>
					<view class="text-sm" style="color: white;">{{ timestampToTime(item.createtime) }}</view>
				</view>
			</view>
		</view>
		<view class="edgeInsetBottom"></view> 
		<uni-load-more :status="status" :content-text="contentText" />
		
		<view class="marke" v-show="seePoups">
			<view class="withdraw">
				<icon @click="seePoups=false" class="cancel" type="clear" size="24" color="#ccc"  ></icon>
				<view class="markeTitle">{{title}}</view>
				<input class="moneyBox" type="digit" cursor-spacing="50px" :placeholder="placeholder"  :value="number" placeholder-class="tips"@blur="changenumber"/>
				
				<!-- <view class="btnGroup item-flex flex-around">
					<button>取消</button>
				</view> -->
				<button @click="tijiao">提交</button>
				
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			seePoups:false,
			number:'',
			title:'兑换成卡',
			placeholder:'请输入兑换数量',
			url:'',
			data:{
				id:'',
				number:''
			}
			
		};
	},
	computed: {
		...mapState(['user'])
	},
	onLoad() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		tijiao(){
			if(this.number==''){
				uni.showToast({
					title:this.placeholder,
					icon:'none'
				})
				return false
			}
			this.data.number=this.number 
			console.log(this.data)
			// this.data
			this.$api.post({
				url: this.url,
				data:this.data,
				success: res => {
					//uni.stopPullDownRefresh();
					this.seePoups=false;
						uni.showToast({
							title:res,
							icon:'none'
						})
					
				}
			});
		},
		zhuangrang(e){
			this.seePoups=true
			this.title='转让',
			this.placeholder='请填写转让人手机号码',
			this.url='/wanlshop/user/bluegivepople',
			this.data.id=e
		},
		quhexiao(){
			uni.navigateTo({
				url:'/pages/product/list?data=%7B"category_id"%3A107,"category_name"%3A"圆梦旅游卡"%7D'
			})
		},
		changenumber(e){
			
			this.number=e.detail.value
			//console.log(e)
			
		},
		onScoreRanksss(){
			uni.navigateTo({
				url:'/pages/user/travelcard/loglog'
			})
		},
		async loadData() {
			this.$api.post({
				url: '/wanlshop/user/bluetravelcardlog',
				data: {
					page: this.current_page
				},
				success: res => {
					console.log(res)
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data : this.dataList.concat(res.data);//数据 追加
					this.total = res.total; //数据量
					this.current_page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					this.status = res.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		timestampToTime(timestamp) {
			var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			var D = (date.getDate() < 10 ?'0'+date.getDate():date.getDate()) + ' ';
			var h = date.getHours() + ':';
			var m = date.getMinutes() + ':';
			var s = date.getSeconds();
			return Y+M+D+h+m+s;
		},
		onScoreRank(){
			this.seePoups=true
			this.title='兑换成卡',
			this.placeholder='请输入兑换数量',
			this.url='/wanlshop/user/changetravelcardall',
			this.data=''
		}
	}
};
</script>

<style>
	.text-center{
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-content: space-around;
		flex-wrap: wrap
	}
	.text-sl{
		font-size: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	.marke{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		background: rgba(0,0,0,0.7);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.withdraw{
		width: 80%;
		background: #fff;
		border-radius: 20rpx;
		position: relative;
	}
	.markeTitle{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333;
		text-align: center;
		background: #f5f5f5;
		border-radius: 20rpx 20rpx 0 0;
	}
	.moneyBox{
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 2rpx solid red;
		margin: 20rpx 5%;
		text-align: center;
		font-size: 42rpx;
		font-weight: bold;
		color: red;
	}
	.tips{
		font-size: 30rpx;
		color: #bebebe;
		text-align: center;
		font-weight: normal;
	}
	.withdraw button{
		width: 90%;
		margin: 20rpx 5%;
		margin-top: 40rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		border: none;
		background: #007AFF;
		color: #fff;
	}
	.withdraw button::after{
		border: none;
	}
	.cancel{
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		background: #fff;
		border-radius: 50%;
		z-index: 999;
		
	}
	.wanl-signin-log .header{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300rpx;
	}
	
	.wanl-signin-log .cu-list.menu-avatar>.cu-item .content{
		left: 25rpx;
	}
	.cu-item{
		background:url('../../../static/bluecard.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20rpx;
	}
</style>
